<template>
  <div class="timer-box">
    <div class="battle-score">
      <img src="https://bsufootball.oss-cn-beijing.aliyuncs.com/%E4%B8%AD%E8%B6%85/logo/ShanghaiSIPG.png" alt="">
      <div>2 : 0</div>
      <img src="https://bsufootball.oss-cn-beijing.aliyuncs.com/%E4%B8%AD%E8%B6%85/%E5%8C%97%E4%BA%AC%E4%B8%AD%E8%B5%AB%E5%9B%BD%E5%AE%89/BeijingGuoan.png" alt="">
    </div>
    <div class="battle-time">
        <div>{{str}}</div>
        <div class="time-button">
          <el-button @click="timeStart()">开始比赛</el-button>
          <el-button @click="stop">暂停比赛</el-button>
        </div>
    </div>
  </div>

</template>

<script>

  export default {
    name:"Time",
    data() {
      return {
        minute:0,
        second:0,//秒
        time:'', //定时器，每50
        str:'00:00',
      }
    },
    methods: {
      timeStart(){
        this.time = setInterval(this.timer,1000)
        this.$emit('matchBegin')
      },
      timer () {//定义计时函数
        this.second =this.second +1;        //毫秒
        if (this.second >=60) {
          this.second = 0;
          this.minute =this.minute +1        //分钟
        }
        if (this.minute >=120) {
          this.minute =0;    //小时
        }
        this.str = this.toDub(this.minute) +':' +this.toDub(this.second)
      },
      toDub (n) {//补0操作
        if (n <10) {
          return '0' + n
        }else {
          return '' + n
        }
      },
      stop () {
        console.log('暂停');
        clearInterval(this.time)
      },
      reset () {//重置
        clearInterval(this.time)
        this.minute =0;
        this.second =0;
        this.str ='00:00'
      }
    }
  }

</script>

<style scoped lang="scss">
  .timer-box {
    width: 100%;
    height: 100%;
    /*background-color: #B500FE;*/
  }
  .battle-score {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 40%;
    /*background-color: #bd2c00;*/
    div {
      width: 120px;
      height: 80px;
      line-height: 80px;
      /*background-color: #1A936F;*/
      font-size: 50px;
      font-weight: bold;
    }
    img {
      width: 80px;
      height: 80px;
    }
  }
  .battle-time {
    width: 100%;
    height: 60%;
    /*background-color: #01538B;*/
    div:first-child {
      width: 100%;
      height: 50%;
      line-height: 75px;
      /*background-color: #990055;*/
      font-size: 80px;
      font-weight: bold;
    }
    div:last-child {
      width: 100%;
      height: 50%;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
  }
</style>